import React from 'react';
import { Button } from 'antd';
import { AUTH_TYPE } from '@/options';
import MyIcon from '@/components/MyIcon';

/**
 * 获取第一个表格的可视化高度
 * @param {number} extraHeight 额外的高度(表格底部的内容高度 Number类型,默认为204)
 * @param {reactRef} ref Table所在的组件的ref
 */

// interface TableScrollProps {
//   // extraHeight?: number;
//   // ref?: MutableRefObject<null>;
// }

export const getTableScroll = () => {
  // let number = extraHeight;
  let tHeader = document.getElementsByClassName('ant-table-thead')[0];
  let footer = document.getElementsByClassName('ant-layout-footer')[0];
  let pagination = document.getElementsByClassName('ant-pagination')[0];

  //表格内容距离顶部的距离
  let tHeaderBottom = 0,
    footerHeight = 0,
    paginationHeight = 0;
  if (tHeader) {
    tHeaderBottom = tHeader.getBoundingClientRect().bottom;
  }
  if (footer) {
    footerHeight = footer.getBoundingClientRect().height;
  }
  if (pagination) {
    paginationHeight = pagination.getBoundingClientRect().height;
  }
  return (
    document.documentElement.clientHeight - (tHeaderBottom + footerHeight + paginationHeight + 32)
  );
};

export const getOptionBtn = (
  type: (typeof AUTH_TYPE)[keyof Pick<typeof AUTH_TYPE, 'UPDATE' | 'DETAIL' | 'DELETE'>],
  click: () => void,
  disabled?: boolean,
): React.ReactNode => {
  return (
    <Button
      key={type}
      type="link"
      className="px-0 flex-center"
      danger={type === AUTH_TYPE.DELETE}
      disabled={disabled}
      onClick={(e) => {
        e.stopPropagation();
        click();
      }}
    >
      {type === AUTH_TYPE.UPDATE ? (
        <>
          <MyIcon name="FormOutlined" /> 编辑
        </>
      ) : type === AUTH_TYPE.DETAIL ? (
        <>
          <MyIcon name="FileTextOutlined" /> 详情
        </>
      ) : (
        <>
          <MyIcon name="DeleteOutlined" /> 删除
        </>
      )}
    </Button>
  );
};
